<template>
  <div class="box">
    <div class="left">
      <div class="item" v-for="(item, index) in leftList">
        <div
          @click="changeList(item)"
          :style="{
            backgroundColor: item.is
              ? 'rgba(118, 100, 255, 0.41568627450980394)'
              : '',
          }"
        >
          {{ item.text }}
        </div>
        <div v-if="index != leftList.length - 1">
          <div></div>
          <div></div>
          <span></span>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="rightTop">
        <img
          src="@/assets/images/组织管理/u458.svg"
          alt=""
          @click="dialogVisible = true"
        />
        <img src="@/assets/images/组织管理/u459.svg" alt="" />
        <img src="@/assets/images/组织管理/u457.svg" alt="" />
        <img src="@/assets/images/组织管理/u460.svg" alt="" />
        <img src="@/assets/images/组织管理/u461.svg" alt="" />
        <img src="@/assets/images/组织管理/u462.svg" alt="" />
        <span
          >分享二维码，被邀请的企业及组织通过微信扫码，自主上报由相关负责人审核资料</span
        >
      </div>
      <el-table
        :data="tableData1"
        border
        style="width: 100%; border-radius: 15px; height: calc(100% - 80px)"
      >
        <el-table-column align="center" type="index" label="序号" width="100">
        </el-table-column>
        <el-table-column align="center" prop="shenhe" label="审核状态">
        </el-table-column>
        <el-table-column align="center" prop="name" label="组织名称">
        </el-table-column>
        <el-table-column align="center" prop="xinyong" label="信用代码">
        </el-table-column>
        <el-table-column align="center" prop="faren" label="法人">
        </el-table-column>
        <el-table-column align="center" prop="farendianhua" label="法人电话">
        </el-table-column>
        <el-table-column align="center" prop="lianxiren" label="联系人">
        </el-table-column>
        <el-table-column align="center" prop="lianxidianhua" label="联系电话">
        </el-table-column>
        <el-table-column align="center" prop="yingyezhizhao" label="营业执照">
        </el-table-column>
        <el-table-column align="center" prop="jianzhuzizhi" label="建筑资质">
        </el-table-column>
        <el-table-column align="center" prop="lurufangshi" label="录入方式">
        </el-table-column>
        <el-table-column align="center" prop="shenheshijian" label="审核时间">
        </el-table-column>
      </el-table>
    </div>
    <!-- --------------------------------添加组织 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="700px"
      :show-close="false"
      class="dialogForm"
    >
      <template slot="title"> <div class="title">新增组织</div></template>
      <div class="dialogDiv">
        <el-form
          label-position="top"
          label-width="80px"
          :model="form"
          :inline="true"
        >
          <el-form-item label="审核状态" style="width: 48%">
            <el-input placeholder="输入" v-model="form.shenhe"></el-input>
          </el-form-item>
          <el-form-item label="组织名称" style="width: 48%">
            <el-input placeholder="输入" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="信用代码" style="width: 48%">
            <el-input placeholder="输入" v-model="form.xinyong"></el-input>
          </el-form-item>
          <el-form-item label="法人" style="width: 48%">
            <el-input placeholder="输入" v-model="form.faren"></el-input>
          </el-form-item>
          <el-form-item label="法人电话" style="width: 48%">
            <el-input placeholder="输入" v-model="form.farendianhua"></el-input>
          </el-form-item>
          <el-form-item label="联系人" style="width: 48%">
            <el-input placeholder="输入" v-model="form.lianxiren"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" style="width: 48%">
            <el-input
              placeholder="输入"
              v-model="form.lianxidianhua"
            ></el-input>
          </el-form-item>
          <el-form-item label="营业执照" style="width: 48%">
            <el-input
              placeholder="输入"
              v-model="form.yingyezhizhao"
            ></el-input>
          </el-form-item>
          <el-form-item label="建筑资质" style="width: 48%">
            <el-input placeholder="输入" v-model="form.jianzhuzizhi"></el-input>
          </el-form-item>
          <el-form-item label="审核员" style="width: 48%">
            <el-input
              placeholder="输入"
              v-model="form.shenheshijian"
            ></el-input>
          </el-form-item>
          <el-form-item style="width: 100%; margin-top: 15px">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="reserve">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      leftList: [
        {
          text: "参与组织",
          is: true,
        },
        {
          text: "项目协同管理员",
          is: false,
        },
        {
          text: "实施工人",
          is: false,
        },
        {
          text: "工人考勤管理",
          is: false,
        },
        {
          text: "考勤记录",
          is: false,
        },
      ],
      tableData1: [
        {
          shenhe: "shenhe",
          name: "name",
          xinyong: "xinyong",
          faren: "faren",
          farendianhua: "farendianhua",
          lianxiren: "lianxiren",
          lianxidianhua: "lianxidianhua",
          yingyezhizhao: "yingyezhizhao",
          jianzhuzizhi: "jianzhuzizhi",
          lurufangshi: "手动录入",
          shenheshijian: "shenheshijian",
        },
      ],
      dialogVisible: false,
      form: {},
    };
  },
  watch: {
    dialogVisible: function (n) {
      if (!n) {
        this.form = {};
      }
    },
  },

  methods: {
    changeList(item) {
      this.leftList.forEach((ele) => {
        if (ele.text == item.text) {
          ele.is = true;
        } else {
          ele.is = false;
        }
      });
    },
    submit() {
      this.form["lurufangshi"] = "手动录入";
      this.tableData1.push(this.form);
      this.dialogVisible = false;
    },
    reserve() {
      this.form = {};
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  .left {
    min-width: 300px;
    background-color: white;
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
    > .item {
      /* height: 180px; */
      > div:nth-of-type(1) {
        height: 80px;
        background-color: #eeeeee6c;
        border-radius: 8px;
        font-size: 20px;
        line-height: 80px;
        text-align: center;
        cursor: pointer;
      }
      > div:nth-of-type(2) {
        height: 70px;
        display: flex;
        position: relative;
        > div {
          flex: 1;
        }
        > div:nth-of-type(1) {
          border-right: 1px rgba(0, 0, 255, 0.56) dashed;
        }
        > span {
          position: absolute;
          bottom: 0;
          left: 50%;
          height: 10px;
          width: 10px;
          background-color: rgba(0, 0, 255, 0.56);
          border-radius: 10px;
          margin-left: -5px;
        }
      }
    }
  }
  .right {
    margin-left: 15px;
    flex: 1;
    background-color: white;
    padding: 15px;
    width: calc(100% - 300px);
    box-sizing: border-box;
    .rightTop {
      height: 80px;
      display: flex;
      align-items: center;
      > img {
        margin-right: 20px;
        height: 40px;
      }
    }
  }
}

::v-deep .el-table--scrollable-x .el-table__body-wrapper {
  height: calc(100% - 49px);
}

::v-deep .has-gutter tr th {
  background-color: rgba(242, 242, 242, 1);
}

.dialogForm {
  ::v-deep .el-dialog__body {
    padding-top: 0;
  }
  .el-form-item {
    margin-bottom: 0px;
  }
  ::v-deep .el-form-item .el-form-item__label {
    padding-bottom: 0;
    color: black;
  }
}
</style>
